<script lang="ts" setup>
import Selector from "@/components/Selector.vue";
import Inputter from "@/components/Inputter.vue";
import TimeSelector from "@/components/TimeSelector.vue";
import { ElMessage } from "element-plus";
import instance from '@/utils/request';
import { useEmployeeStore } from "@/stores/employee";
import router from "@/router/router";
import { ref, onMounted } from "vue";

// 员工客房状态页面
onMounted(() => {
  init();
});

const employee = useEmployeeStore();

let stay_id = ref("");
let stay_before_time = ref(new Date("1970-01-01 00:00:00"));
let stay_start_time = ref(new Date("1970-01-01 00:00:00"));
let stay_end_time = ref(new Date("1970-01-01 00:00:00"));

let dialogVisible = ref(false);
let dialogVisibleContinue = ref(false);
let dialogVisibleBook = ref(false);
let dialogMessage = ref("");

// 搜索
const stay_id_select = ref("");
const room_id_select = ref("");
const room_type_select = ref("全部");
const room_price_select = ref("");
const room_status_select = ref("全部");
const stay_name_select = ref("");
const stay_start_time_select = ref("");
const stay_end_time_select = ref("");

// 类型的下拉框（查询）
const room_type_options = [
  { value:'全部', label:'全部' },
  { value:'标准间', label:'标准间' },
  { value:'标准大床房', label:'标准大床房' },
  { value:'高级大床房', label:'高级大床房' },
  { value:'商务大床房', label:'商务大床房' },
  { value:'标准双床房', label:'标准双床房' },
  { value:'高级双床房', label:'高级双床房' },
  { value:'商务双床房', label:'商务双床房' },
  { value:'标准家庭房', label:'标准家庭房' },
  { value:'高级家庭房', label:'高级家庭房' }
];

// 状态的下拉框（查询）
const room_status_options = [
  { value:'全部', label:'全部' },
  { value:'空闲', label:'空闲' },
  { value:'待支付', label:'待支付' },
  { value:'已入住', label:'已入住' },
  { value:'退房中', label:'退房中' }
];

interface Data {
  stay_id: string
  room_id: string
  stay_name: string
  room_type: string
  room_price: string
  room_status: string
  stay_start_time: string
  stay_end_time: string
}

// 不同状态不同样式
const rowClassName = ({row, rowIndex,}: {
  row: Data
  rowIndex: number
}) => {
  if ((row.room_status === '空闲')) {
    return 'color-employee-room-status-1';
  }
  else if (row.room_status === '待支付') {
    return 'color-employee-room-status-2';
  }
  else if (row.room_status === '已入住') {
    return 'color-employee-room-status-3';
  }
  else if (row.room_status === '退房中') {
    return 'color-employee-room-status-4';
  }
  return '';
}

// 数据
let tableData = [];

// 条件查询
const filterTableData = ref();
function filter() {
  filterTableData.value = tableData.filter((data) =>
      (!stay_id_select.value || data.stay_id.toString().includes(stay_id_select.value)) &&
      (!room_id_select.value || data.room_id.toString().includes(room_id_select.value)) &&
      (!stay_name_select.value || data.stay_name.toString().includes(stay_name_select.value)) &&
      (room_type_select.value === '全部' || data.room_type.includes(room_type_select.value)) &&
      (!room_price_select.value || data.room_price.includes(room_price_select.value)) &&
      (room_status_select.value === '全部' || data.room_status.includes(room_status_select.value)) &&
      (!stay_start_time_select.value || data.stay_start_time.includes(stay_start_time_select.value)) &&
      (!stay_end_time_select.value || data.stay_end_time.includes(stay_end_time_select.value))
  );
}

function open(id, message) {
  // 打开确认对话框
  dialogMessage.value = message;
  dialogVisible.value = true;
  stay_id.value = id.toString();
}

function openContinue(id, time) {
  // 打开续房确认对话框
  //console.log(id);
  stay_id.value = id.toString();
  dialogVisibleContinue.value = true;
  stay_before_time.value = new Date(time);
  stay_end_time.value = new Date(time);
  //console.log(stay_before_time.value);
}

function openBook(id) {
  // 打开预订对话框
  stay_id.value = id.toString();
  dialogVisibleBook.value = true;
}

function confirm() {
  if(dialogMessage.value === '已支付') pay();
  if(dialogMessage.value === '退订') cancel();
  if(dialogMessage.value === '退房') checkout();

  dialogVisible.value = false;
}

function close () {
  // 关闭确认对话框
  stay_id.value = "";
  stay_before_time.value = new Date("1970-01-01 00:00:00");
  stay_start_time.value = new Date("1970-01-01 00:00:00");
  stay_end_time.value = new Date("1970-01-01 00:00:00");
  dialogMessage.value = "";
  dialogVisible.value = false;
  dialogVisibleContinue.value = false;
  dialogVisibleBook.value = false;
}

function init() {
  // 初始化
  instance.request({
    url: 'employee/roomstatus/init',
    method: 'POST',
    headers: { "Employee-Id": employee.employee_id }
  })
      .then(function(response) {
        if(response.data.code === "ERROR") {
          ElMessage({
            message: "初始化失败！",
            type: "error"
          });
        }
        if(response.data.code === "SUCCESS") {
          tableData = response.data.data;
          filterTableData.value = tableData;
        }
      })
      .catch(function(error){
        console.log(error);
        if(error.response.request.status === 401) {
          ElMessage({
            message: "您的连接已被注销！",
            type: "error"
          });
          employee.logout();
          router.push("/employee/index");
          return;
        }
        ElMessage({
          message: "初始化失败！",
          type: "error"
        });
        setTimeout(() => {
          init();
        }, 2000 );
      });
}

function pay() {
  // 支付订单
  instance.request({
    url: 'employee/roomstatus/pay',
    method: 'POST',
    data: {
      stay_id: stay_id.value,
      employee_id: employee.employee_id
    },
    headers: { "Employee-Id": employee.employee_id }
  })
      .then(function(response) {
        if(response.data.code === "ERROR") {
          ElMessage({
            message: "处理失败！",
            type: "error"
          });
        }
        if(response.data.code === "SUCCESS") {
          ElMessage({
            message: "处理成功！",
            type: "success"
          });
          dialogVisible.value = false;
        }
        init();
      })
      .catch(function(error){
        console.log(error);
        if(error.response.request.status === 401) {
          ElMessage({
            message: "您的连接已被注销！",
            type: "error"
          });
          employee.logout();
          router.push("/employee/index");
          return;
        }
        ElMessage({
          message: "处理失败！",
          type: "error"
        });
      });
}

function cancel() {
  // 退订
  instance.request({
    url: 'employee/roomstatus/cancel',
    method: 'POST',
    data: {
      stay_id: stay_id.value,
      employee_id: employee.employee_id
    },
    headers: { "Employee-Id": employee.employee_id }
  })
      .then(function(response) {
        if(response.data.code === "ERROR") {
          ElMessage({
            message: "退订失败！",
            type: "error"
          });
        }
        if(response.data.code === "SUCCESS") {
          ElMessage({
            message: "退订成功！",
            type: "success"
          });
          dialogVisible.value = false;
        }
        init();
      })
      .catch(function(error){
        console.log(error);
        if(error.response.request.status === 401) {
          ElMessage({
            message: "您的连接已被注销！",
            type: "error"
          });
          employee.logout();
          router.push("/employee/index");
          return;
        }
        ElMessage({
          message: "退订失败！",
          type: "error"
        });
      });
}

function Continue() {
  // 续房
  instance.request({
    url: 'employee/roomstatus/continue',
    method: 'POST',
    data: {
      stay_id: stay_id.value,
      stay_end_time: stay_end_time.value.toLocaleString(),
      employee_id: employee.employee_id
    },
    headers: { "Employee-Id": employee.employee_id }
  })
      .then(function(response) {
        if(response.data.code === "ERROR") {
          ElMessage({
            message: "续房失败！",
            type: "error"
          });
        }
        if(response.data.code === "SUCCESS") {
          ElMessage({
            message: "续房成功！",
            type: "success"
          });
          dialogVisibleContinue.value = false;
        }
        init();
      })
      .catch(function(error){
        console.log(error);
        if(error.response.request.status === 401) {
          ElMessage({
            message: "您的连接已被注销！",
            type: "error"
          });
          employee.logout();
          router.push("/employee/index");
          return;
        }
        ElMessage({
          message: "续房失败！",
          type: "error"
        });
      });
}

function checkout() {
  // 退房
  instance.request({
    url: 'employee/roomstatus/checkout',
    method: 'POST',
    data: {
      stay_id: stay_id.value,
      employee_id: employee.employee_id
    },
    headers: { "Employee-Id": employee.employee_id }
  })
      .then(function(response) {
        if(response.data.code === "ERROR") {
          ElMessage({
            message: "退房失败！",
            type: "error"
          });
        }
        if(response.data.code === "SUCCESS") {
          ElMessage({
            message: "退房成功！",
            type: "success"
          });
          dialogVisible.value = false;
        }
        init();
      })
      .catch(function(error){
        console.log(error);
        if(error.response.request.status === 401) {
          ElMessage({
            message: "您的连接已被注销！",
            type: "error"
          });
          employee.logout();
          router.push("/employee/index");
          return;
        }
        ElMessage({
          message: "退房失败！",
          type: "error"
        });
      });
}
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      :show-close="false"
      align-center
      width="18%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
  >
    <span>确认{{ dialogMessage }}</span>
    <div class="cancel-confirm">
      <el-button color="#568fc1" plain @click="close">
        <span>取消</span>
      </el-button>
      <el-button color="#568fc1" class="button-color" @click="confirm">
        <span>确认</span>
      </el-button>
    </div>
  </el-dialog>

  <el-dialog
      v-model="dialogVisibleContinue"
      :show-close="false"
      align-center
      width="18%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
  >
    <span>确认{{ dialogMessage }}</span>
    <time-selector v-model="stay_end_time"/>
    <span v-if="stay_end_time <= stay_before_time"
          style="color:red;">不能早于当前退房时间！</span>
    <div class="cancel-confirm">

      <el-button color="#568fc1" plain @click="close">
        <span>取消</span>
      </el-button>

      <el-button :disabled="stay_end_time <= stay_before_time"
                 color="#568fc1" class="button-color" @click="Continue">
        <span>确认</span>
      </el-button>
    </div>
  </el-dialog>

  <el-dialog
      v-model="dialogVisibleBook"
      :show-close="false"
      align-center
      width="18%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
  >
    <span style="color:red;">*</span>
    <span style="color:#2a3441;">入住时间：</span>
    <time-selector v-model="stay_start_time"/><br>
    <span style="color:red;">*</span>
    <span style="color:#2a3441;">退房时间：</span>
    <time-selector v-model="stay_end_time"/>
    <span v-if="stay_end_time <= stay_start_time"
          style="color:red;">退房时间不能早于入住时间！</span>
    <div class="cancel-confirm">
      <el-button color="#568fc1" plain @click="close">
        <span>取消</span>
      </el-button>
      <el-button :disabled="stay_end_time <= stay_start_time"
                 color="#568fc1" class="button-color" @click="">
        <span>确认</span>
      </el-button>
    </div>
  </el-dialog>

  <div class="select">
    <span>订单号：</span>
    <inputter width="100" v-model="stay_id_select"/>

    &emsp;&emsp;<span>房间号：</span>
    <inputter width="100" v-model="room_id_select"/>

    &emsp;&emsp;<span>类型：</span>
    <selector :options="room_type_options" width="100" v-model="room_type_select"/>

    &emsp;&emsp;<span>价格：</span>
    <inputter width="100" v-model="room_price_select"/>

    &emsp;&emsp;<span>状态：</span>
    <selector :options="room_status_options" width="100" v-model="room_status_select"/>

    <br><br><span>入住人：</span>
    <inputter width="100" v-model="stay_name_select"/>

    &emsp;&emsp;<span>入住时间：</span>
    <inputter width="200" v-model="stay_start_time_select"/>

    &emsp;&emsp;<span>退房时间：</span>
    <inputter width="200" v-model="stay_end_time_select"/>

    &emsp;&emsp;
    <el-button color="#568fc1" class="button-color" @click="filter">
      <span>搜索</span>
    </el-button>
  </div>
  <div class="table">
    <el-table
        header-row-style="color: #000000; background-color: #f0f0f0;"
        height="600"
        style="width: 100%"
        :data="filterTableData"
        :row-class-name="rowClassName"
    >
      <el-table-column prop="stay_id" label="订单号" width="100"/>
      <el-table-column prop="room_id" label="房间号" width="100"/>
      <el-table-column prop="stay_name" label="入住人" width="100"/>
      <el-table-column prop="room_type" label="类型" width="150"/>
      <el-table-column prop="room_price" label="价格" width="150"/>
      <el-table-column prop="room_status" label="状态" width="100"/>
      <el-table-column prop="stay_start_time" label="入住时间" width="180"/>
      <el-table-column prop="stay_end_time" label="退房时间" width="180"/>

      <el-table-column align="right" fixed="right" width="200">
        <template #default="scope">
          <el-button v-if="scope.row.room_status === '空闲'"
                     color="#568fc1" class="button-color"
                     @click="openBook(scope.row.stay_id)">
            <span>预订</span>
          </el-button>

          <el-button v-if="scope.row.room_status === '待支付'"
                     color="#568fc1" class="button-color"
                     @click="open(scope.row.stay_id, '已支付')">
            <span>已支付</span>
          </el-button>

          <el-button v-if="scope.row.room_status === '待支付'"
                     type="danger" plain
                     @click="open(scope.row.stay_id, '退订')">
            <span>退订</span>
          </el-button>

          <el-button v-if="scope.row.room_status === '已入住'"
                     color="#568fc1" class="button-color"
                     @click="openContinue(scope.row.stay_id, scope.row.stay_end_time)">
            <span>续房</span>
          </el-button>

          <el-button v-if="scope.row.room_status === '已入住'"
                     type="danger" plain
                     @click="open(scope.row.stay_id, '退房')">
            <span>退房</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.select {
  padding-top: 2vh;
  padding-left: 8vh;
  padding-right: 5vh;
  /* border: 1px solid black; */
}
.table {
  padding: 1vh 5vh 5vh;
  /* border: 1px solid black; */
}
.button-color {
  --el-button-hover-bg-color: rgb(238, 244, 249) !important;
  --el-button-hover-text-color: #568fc1 !important;
  --el-button-text-color: white !important;
}
.cancel-confirm {
  padding-top: 1vh;
  text-align: center;
}
</style>

<style>
.el-table .color-employee-room-status-1 {
  --el-table-tr-bg-color: #C1FFC1;
  --el-table-row-hover-bg-color: #C1FFC1;
}
.el-table .color-employee-room-status-2 {
  --el-table-tr-bg-color: #80b6e5;
  --el-table-row-hover-bg-color: #80b6e5;
}
.el-table .color-employee-room-status-3 {
  --el-table-tr-bg-color: #e4f7fb;
  --el-table-row-hover-bg-color: #e4f7fb;
}
.el-table .color-employee-room-status-4 {
  --el-table-tr-bg-color: #f0f0f0;
  --el-table-row-hover-bg-color: #f0f0f0;
}
</style>